<style include="shortcut-customization-shared">
  :host(:not([is-add-view_])) #container {
    border-bottom: var(--cr-separator-line);
  }

  #container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10px;
    padding-top: 8px;
  }

  #acceleratorView {
    align-items: center;
    display: flex;
    flex: 1;
  }

  #acceleratorView accelerator-view {
    flex: 1;
  }

  #acceleratorInfoText {
    padding-top: 10px
  }

  :host([has-error]) #acceleratorInfoText {
    color: var(--cros-color-alert);
  }

  #cancelButtonContainer {
    margin-top: 5px;
  }

  #editButton {
    --cr-icon-button-icon-start-offset: 3px;
    padding-top: 3px;
  }

  .clickable-button {
    --cr-icon-button-fill-color: var(--cros-button-icon-color-secondary);
  }

  :host([is-edit-view]) #acceleratorView {
    border-color: var(--cros-color-prominent);
    border-radius: 5px;
    border-style: solid;
    border-width: thin;
    padding: 5px;
  }
</style>

<div id="container">
  <div id="acceleratorView">
    <accelerator-view id="acceleratorItem"
        accelerator-info="[[acceleratorInfo]]" view-state="{{viewState}}"
        status-message="{{statusMessage}}" has-error="{{hasError}}"
        action="[[action]]" source="[[source]]">
    </accelerator-view>
  </div>
  <template id="buttonContainer" is="dom-if" if="[[!acceleratorInfo.locked]]">
    <div id="editButtonsContainer" hidden="[[showEditView(viewState)]]">
      <cr-icon-button id="editButton"
          class="clickable-button"
          iron-icon="shortcut-customization:edit"
          aria-hidden="true"
          on-click="onEditButtonClicked">
      </cr-icon-button>
      <cr-icon-button id="deleteButton"
          class="clickable-button"
          iron-icon="shortcut-customization:delete"
          aria-hidden="true"
          on-click="onDeleteButtonClicked">
      </cr-icon-button>
    </div>
    <div id="cancelButtonContainer" hidden="[[!showEditView(viewState)]]">
      <cr-button id="cancelButton" on-click="onCancelButtonClicked">
        [[i18n('cancel')]]
      </cr-button>
    </div>
  </template>
</div>

<div id="acceleratorInfoText" hidden="[[!showEditView(viewState)]]">
  [[statusMessage]]
</div>